<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>用户</title>
<script type="text/javascript">
//初始化下拉框
$.ajax({
	url: "management/role/listRole",
	type:"POST",
	success:function(data){
		$(data).each(function(n){
            $("<option/>").html(this.name).val(this.roleId)
            .appendTo("#roleId");
        });
	}
});
$.ajax({
	url: "management/title/listTitle",
	type:"POST",
	success:function(data){
		$(data).each(function(n){
            $("<option/>").html(this.name).val(this.titleId)
            .appendTo("#titleId");
        });
	}
});
function upImage() {
	$("#imgForm").ajaxSubmit({
		dataType : "json",
		success : function(data) {
			if (data.success == true) {
				var url = data.msg;
				//alert(url);
				$("#imgId").attr("src", url);
				$("#photo").val(url);
			} else {
				alert(data.msg);
			}
		}
	});
}
$(function() {
	$("#form").validate({
		rules : {
			"account" : {
				required : true,
				remote : { // 异步验证是否存在
					type : "POST",
					url : 'management/employee/isExist',
					data : {
						account : function() {
							return $("#account").val();
						}
					}
				}
			},
			"roleId" : {
				required : true
			},
			"name" : {
				required : true
			},
			"phone" : {
				isContact : true
			},
			"titleId" : {
				required : true
			},
			"shopName" : {
				required : true
			}
		},
		messages : {
			"account" : {
				required : "请输入账号",
				remote : "该账号已经存在"
			},
			"roleId" : {
				required : "请选择角色"
			},
			"name" : {
				required : "请输入姓名"
			},
			"titleId" : {
				required :"请选择头衔"
			},
			"shopName" : {
				required : "请选择所属门店"
			}
		},
		errorPlacement: function(error, element){//错误信息显示位置
			if(element.attr("name")=="shopName"){
				error.css("left",$(element).width()+110);
				error.insertAfter(element);
			}else{
				error.insertAfter(element);
			}
		 }
		
	});
	$("#submitBtn").on("click",function(){
		$("#form").submit();
	});
});

var layerPage;//弹出框关闭时用到
	function showShopTree() {
		layerPage = layer.open({
			title : "选择门店",
			type : 2,
			content : 'management/shop/shopTree'
		});
	}
	function showTreeData(treeNode){
		$("#shopName").val(treeNode.name);
		$("#shopId").val(treeNode.id);
	}
</script>
</head>
<body>
	<ol class="am-breadcrumb am-breadcrumb-slash am-padding" style="margin-bottom: 0px;">
		<li><a href="management/index">首页</a></li>
		<li><a href="management/employee/index">员工档案管理</a></li>
		<li class="am-active">新增</li>
	</ol>
	<div class="am-g">
		<div class="am-u-md-12">
				<div class="am-tabs am-margin">
					<ul class="am-tabs-nav am-nav am-nav-tabs">
						<li class="am-active"><a href="javascript:void(0)">基本信息</a></li>
					</ul>
					<div class="am-tabs-bd">
						<div class="am-tab-panel am-active">
							<div class="am-g">
								<div class="am-u-sm-12">
									<form id="imgForm" class="am-form am-form-horizontal am-block" action="management/file" method="post" enctype="multipart/form-data">
										<label class="am-u-sm-2 am-form-label">员工头像</label>
										<div class="am-u-sm-4 am-u-end">
											<img id="imgId" src="file/a.png" class="am-form-field">
											<div class="am-form-group am-form-file">
												<button type="button" class="am-btn am-btn-default">
													<i class="am-icon-cloud-upload"></i> 选择要上传的图片
												</button>
												<input name="imageFile" id="imageFile" onchange="upImage();" type="file" multiple>
											</div>
										</div>
									</form>
								</div>
									
								<div class="am-u-md-12">
									<form class="am-form am-form-horizontal" id="form" name="form"  method="post" action="management/employee/save">
									<input type="hidden" name="photo" id="photo">
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">账号</label>
										<div class="am-u-md-4 am-u-end">
											<input type="text" id="account" name="account" maxlength="30" class="am-form-field am-input-sm">
										</div>
									</div>
									<!-- <div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">密码</label>
										<div class="am-u-md-4 am-u-end">
											<input type="password" id="passwd" name="passwd" class="am-form-field am-input-sm">
										</div>
									</div>
									 -->
									 <div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">角色</label>
										<div class="am-u-md-4 am-u-end">
											<select id="roleId" name="roleId" >
												<option value="">请选择角色</option>
											</select>
										</div>
									</div>
									
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">头衔</label>
										<div class="am-u-md-4 am-u-end">
											<select id="titleId" name="titleId" >
												<option value="">请选择头衔</option>
											</select>
										</div>
									</div>
									
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">所属门店</label>
										<div class="am-u-md-4 am-u-end">
											<input type="text" id="shopName" name="shopName" class="am-form-field am-input-sm" readonly onclick="showShopTree();">
											<input type="hidden" id="shopId" name="shopId" class="am-form-field am-input-sm">
										</div>
										<label class="am-u-sm-1 am-form-label am-u-end am-text-left">
											<a href="javascript:void(0);" onclick="showShopTree(); return false;">选择</a>
										</label>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">姓名</label>
										<div class="am-u-md-4 am-u-end">
											<input type="text" id="name" name="name" maxlength="30" class="am-form-field am-input-sm">
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">联系电话</label>
										<div class="am-u-md-4 am-u-end">
											<input type="text" id="phone" name="phone" maxlength="20" class="am-form-field am-input-sm">
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">性别</label>
										<div class="am-u-sm-4 am-u-end am-form-label am-text-left">
											<input type="radio" name="sex" value="M" checked="checked"> 男
											<input type="radio" name="sex" value="F"> 女
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">员工简介</label>
										<div class="am-u-md-4 am-u-end">
											<textarea id="introduction" name="introduction"  maxlength="120" class="am-form-field am-input-sm">
											</textarea>
										</div>
									</div>								
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="am-margin">
					<button class="am-btn am-btn-primary am-btn-xs" type="button" id="submitBtn"><span class="am-icon-check"></span> 保存</button>
					<a href="javascript:;" onClick="javascript:history.back(-1);" class="am-btn am-btn-primary am-btn-xs"><span class="am-icon-times"></span> 取消</a>
				</div>
		</div>
	</div>
</body>
</html>
